/**
 * 提示框工具类
 * 支持成功、警告、错误三种样式
 * 支持多个提示框堆叠显示
 */
export class AlertHelper {
  static #alerts = []; // 存储当前显示的提示框
  static #baseOffset = 20; // 基础偏移量
  static #alertHeight = 50; // 每个提示框的高度（包含间距）

  // 提示框样式配置
  static #styles = {
    success: {
      backgroundColor: '#4CAF50',
      color: 'white'
    },
    warning: {
      backgroundColor: '#FF9800',
      color: 'white'
    },
    error: {
      backgroundColor: '#F44336',
      color: 'white'
    }
  };

  /**
   * 显示提示框
   * @param {string} message - 提示信息
   * @param {string} type - 提示类型：success/warning/error
   * @param {number} duration - 显示时长（毫秒）
   */
  static show(message, type = 'success', duration = 10000) {
    // 创建提示框元素
    const alertDiv = document.createElement('div');
    const style = this.#styles[type] || this.#styles.success;

    // 设置基础样式
    alertDiv.style.cssText = `
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      background-color: ${style.backgroundColor};
      color: ${style.color};
      padding: 15px 30px;
      border-radius: 4px;
      z-index: 9999;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      font-size: 14px;
      transition: opacity 0.5s, transform 0.5s;
      opacity: 0;
      transform: translate(-50%, -20px);
    `;
    alertDiv.textContent = message;

    // 添加到页面
    document.body.appendChild(alertDiv);

    // 计算位置并添加到队列
    const index = this.#alerts.length;
    const top = this.#baseOffset + (index * this.#alertHeight);
    alertDiv.style.top = `${top}px`;

    // 添加到队列
    this.#alerts.push(alertDiv);

    // 显示动画
    requestAnimationFrame(() => {
      alertDiv.style.opacity = '1';
      alertDiv.style.transform = 'translate(-50%, 0)';
    });

    // 设置定时器移除
    setTimeout(() => {
      this.remove(alertDiv);
    }, duration);
  }

  /**
   * 移除提示框
   * @param {HTMLElement} alertDiv - 要移除的提示框元素
   */
  static remove(alertDiv) {
    // 淡出动画
    alertDiv.style.opacity = '0';
    alertDiv.style.transform = 'translate(-50%, -20px)';

    // 动画结束后移除
    setTimeout(() => {
      // 从队列中移除
      const index = this.#alerts.indexOf(alertDiv);
      if (index > -1) {
        this.#alerts.splice(index, 1);
      }
      alertDiv.remove();

      // 重新调整其他提示框的位置
      this.#alerts.forEach((alert, i) => {
        const top = this.#baseOffset + (i * this.#alertHeight);
        alert.style.top = `${top}px`;
      });
    }, 500);
  }

  /**
   * 显示成功提示
   * @param {string} message - 提示信息
   * @param {number} duration - 显示时长（毫秒）
   */
  static success(message, duration) {
    this.show(message, 'success', duration);
  }

  /**
   * 显示警告提示
   * @param {string} message - 提示信息
   * @param {number} duration - 显示时长（毫秒）
   */
  static warning(message, duration) {
    this.show(message, 'warning', duration);
  }

  /**
   * 显示错误提示
   * @param {string} message - 提示信息
   * @param {number} duration - 显示时长（毫秒）
   */
  static error(message, duration) {
    this.show(message, 'error', duration);
  }
} 